<template>
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="paramsForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="商户名称" prop="name">
      <el-input v-model="paramsForm.name"  autocomplete="off" />
    </el-form-item>
    <el-form-item label="联系方式" prop="mobile">
      <el-input
        v-model="paramsForm.mobile"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="店铺名称" prop="shopName">
      <el-input v-model="paramsForm.shopName" />
    </el-form-item>
    <el-form-item label="店铺位置" prop="shopAddress">
      <el-input v-model="paramsForm.shopAddress" />
    </el-form-item>
    <el-form-item label="营业时间" prop="businessHours">
      <el-input v-model="paramsForm.businessHours" />
    </el-form-item>
    <el-form-item label="店铺状态" prop="status">
      <el-radio-group v-model="paramsForm.status">
      <el-radio value="0" size="large">启用</el-radio>
      <el-radio value="1" size="large">禁用</el-radio>
     </el-radio-group>
    </el-form-item>
    <el-form-item>
      <div style="margin-left: auto;">
       <el-button type="primary" @click="submitForm">
        确认
      </el-button>
      <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
defineOptions({ name: 'MerchantInfo' })
import { watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as MerchantApi from '@/api/mall/merchant/index'
const formRef = ref<FormInstance>()
const message = useMessage() // 消息弹窗
const props = defineProps({
   id:{
     type:String,
     default:''
   },
})
const emit = defineEmits(['refresh','close'])
const paramsForm = reactive({
  id:props.id,
  name: '',
  mobile: "", //手机号
  shopName: "", //店铺名称
  shopAddress: "", //店铺位置
  businessHours: "", //营业时间
  status: "0" //商户状态：0-正常，1-禁用
})
const rules = reactive<FormRules<typeof paramsForm>>({
  name: [{  required: true,message: '不能为空',trigger: 'blur' }],
  mobile: [{  required: true,message: '不能为空',trigger: 'blur' }],
  shopName: [{  required: true, message: '不能为空',trigger: 'blur' }],
  shopAddress: [{  required: true, message: '不能为空',trigger: 'blur' }],
  businessHours: [{  required: true, message: '不能为空',trigger: 'blur' }],
  status: [{  required: true, message: '不能为空',trigger: 'blur' }],
})
const resetForm = () => {
  if (formRef){
     formRef?.value?.resetFields()
  }
}

const submitForm = () => {
  if (!formRef) return
  formRef.value?.validate(async(valid) => {
    if (valid) {
      try {
        if(props.id){
          await MerchantApi.updateMerchant(paramsForm)
          message.success('更新商户成功')
              // 提交成功后关闭Dialog
        }else{
          await MerchantApi.createMerchant(paramsForm)
          message.success('添加商户成功')
          formRef.value?.resetFields()
        }
        emit('close')
        emit('refresh')
      } catch (err) {
        message.error('添加商户失败' )
      }

    } 
  })
}

onMounted(async()=>{
    await fetchData()
})

const fetchData=async()=>{
  if(props.id){
    await MerchantApi.getMerchantById(props.id).then(res=>{
      paramsForm.name=res.name
      paramsForm.mobile=res.mobile
      paramsForm.shopName=res.shopName
      paramsForm.shopAddress=res.shopAddress
      paramsForm.businessHours=res.businessHours
      paramsForm.status=res.status+''
    })
  }
}
watch(
  () => props.id,
  (newid) => {
    if (newid) {
      if (props.id) {
        fetchData()
      } else {
        resetForm()
      }
    }
  }
)
//暴露对外方法
defineExpose({ })
</script>